<template>
  <div>
    <van-nav-bar
  title="食谱"
  left-arrow
  @click-left="onClickLeft"

  />
    <!-- 轮播头部 -->
    <div class="luk">
      <van-swipe :autoplay="4000" id="lb" indicator-color="#CAC8C8">
        <van-swipe-item v-for="(item,i) in list" :key="i">
          <img :src="item.picPath">
        </van-swipe-item>
      </van-swipe>
      <div class="yuank"></div>
    </div>

    <!-- 能不能吃 -->
    <div class="nc">
      <van-row van-row type="flex" justify="space-around">
        <van-col span="6" class="spa" v-for="(item,i) in images" :key="i">
          <dl class="d1"  @click="todo(i)">
            <dd><img :src="item.imgpath" alt=""></dd>
            <dt>{{item.content}}</dt>
          </dl>
        </van-col>
      </van-row>
    </div>

    <!-- 食物推荐 -->
    <van-card
      class="fk"
      :title="item.foodListContent"
      :desc="item.foodListContentDetail"
      :thumb="item.foodListImgpath"
      v-for="(item,i) in food"
      :key="i"
      @click="tap(item.foodListId)"
    />
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Recipe",
  data() {
    return {
      list: "",
      food: [],
      images:[]
    };
  },
  methods: {
    tap(id){
      this.$router.push('/fooddetails?id='+id)
    },
    onClickLeft(){
      this.$router.go(-1)
    },
    todo(index){
      if(index == 0){
        this.$router.push('/nutrition')
      }else if(index == 1){
        this.$router.push('/canyoueat')
      }else if(index == 2){
        this.$router.push('/myfavorite')
      }
    }
  },
  mounted() {
    var _this = this;
    axios({
      url: "http://10.8.158.60:8080/picture/foodListPicture"
    }).then(function(data) {
      _this.list = data.data.msg;
    });
    axios({
      url: "http://10.8.158.60:8080/foodlist/foodlistcontent"
    }).then(function(data) {
    
      _this.food = data.data.msg;
    });
     axios({
      url: "http://10.8.158.60:8080/menu/canEat"
    }).then(function(data) {
      _this.images = data.data.msg
    });
  }
};
</script>

<style scoped>
#lb {
  width: 375px;
  height: 250px;
}
.luk {
  width: 375px;
  height: 260px;
  position: relative;
  overflow: hidden;
}
.yuank {
  width: 500px;
  height: 500px;
  background: #ffffff;
  border-radius: 250px/100px;
  position: absolute;
  bottom: -452px;
  left: -64px;
  z-index: 1;
}

/* 能不能吃 */
.nc {
  width: 375px;
  height: 98px;
  background: #ffffff;
}
.spa {
  width: 56px;
  height: 84px;
}
.spa img{
  width: 56px;
  height: 84px;
}
.nc dl {
  width: 56px;
  height: 84px;
  position: relative;
}
.nc dl dd {
  width: 52px;
  height: 52px;
  background: #f4f4f4;
  border-radius: 50%;
  position: absolute;
  left: 2px;
  overflow: hidden
}
.nc dl dt {
  width: 56px;
  height: 20px;
  position: absolute;
  bottom: 0;
  font-size: 14px;
}

/* 食物推荐 */
.fk {
  width: 327px;
  height: 133px;
  border-radius: 12px;
  margin: 20px 20px;
  background-color: rgba(240, 240, 240, 1);
  padding: 20px 16px;
}
.van-card__thumb {
  width: 111px;
  height: 108px;
  border-radius: 8px;
  background-color: rgba(213, 213, 213, 1);
}
.van-card__title {
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
  margin: 24px 0 0 9px;
}
.van-card__desc {
  color: rgba(153, 153, 153, 1);
  font-size: 12px;
  text-align: left;
  font-family: PingFangSC-regular;
  margin-left: 9px;
  white-space: normal;
}
</style>
